<template>
  <AppLayout>
    <div class="games-page">
      <div class="page-header">
        <h1>游戏列表</h1>
        <p>探索我们丰富多彩的体感游戏</p>
      </div>

      <div class="filter-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchQuery"
              placeholder="搜索游戏"
              prefix-icon="el-icon-search"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-select v-model="categoryFilter" placeholder="游戏类型" clearable>
              <el-option
                v-for="category in categories"
                :key="category.value"
                :label="category.label"
                :value="category.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="sortBy" placeholder="排序方式">
              <el-option label="最新上线" value="newest"></el-option>
              <el-option label="最受欢迎" value="popular"></el-option>
              <el-option label="评分最高" value="rating"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>

      <div class="games-list mt-20">
        <el-row :gutter="20">
          <el-col :span="6" v-for="game in filteredGames" :key="game.id">
            <el-card shadow="hover" class="game-card" @click="goToGame(game.id)">
              <img :src="game.cover" class="game-cover" />
              <div class="game-info">
                <h3>{{ game.title }}</h3>
                <p>{{ game.description }}</p>
                <div class="game-meta flex-between">
                  <el-tag size="small">{{ game.category }}</el-tag>
                  <el-rate v-model="game.rating" disabled text-color="#ff9900"></el-rate>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="pagination-container mt-20 text-center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalGames"
          :page-size="pageSize"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import AppLayout from '../components/layout/Layout.vue'

defineOptions({
  name: 'GamesPage'
})

const router = useRouter()

// 分页参数
const currentPage = ref(1)
const pageSize = ref(12)
const totalGames = ref(100)

// 筛选参数
const searchQuery = ref('')
const categoryFilter = ref('')
const sortBy = ref('newest')

// 游戏类型
const categories = ref([
  { label: '舞蹈', value: '舞蹈' },
  { label: '冒险', value: '冒险' },
  { label: '格斗', value: '格斗' },
  { label: '运动', value: '运动' },
  { label: '射击', value: '射击' },
  { label: '益智', value: '益智' }
])

// 模拟游戏数据
const games = ref([
  {
    id: 1,
    title: '舞动奇迹',
    description: '跟随音乐节奏，展现你的舞蹈才华',
    cover: 'https://via.placeholder.com/300x200',
    category: '舞蹈',
    rating: 4.5,
    releaseDate: '2023-10-15'
  },
  {
    id: 2,
    title: '太空冒险',
    description: '探索浩瀚宇宙，与外星生物互动',
    cover: 'https://via.placeholder.com/300x200',
    category: '冒险',
    rating: 4.2,
    releaseDate: '2023-09-20'
  },
  {
    id: 3,
    title: '格斗之王',
    description: '体感格斗游戏，考验你的反应能力',
    cover: 'https://via.placeholder.com/300x200',
    category: '格斗',
    rating: 4.7,
    releaseDate: '2023-11-05'
  },
  {
    id: 4,
    title: '虚拟运动会',
    description: '在家中体验各种体育运动的乐趣',
    cover: 'https://via.placeholder.com/300x200',
    category: '运动',
    rating: 4.0,
    releaseDate: '2023-08-12'
  },
  {
    id: 5,
    title: '节奏大师',
    description: '感受音乐的律动，挑战你的节奏感',
    cover: 'https://via.placeholder.com/300x200',
    category: '舞蹈',
    rating: 4.3,
    releaseDate: '2023-07-30'
  },
  {
    id: 6,
    title: '丛林探险',
    description: '穿越神秘丛林，寻找失落的宝藏',
    cover: 'https://via.placeholder.com/300x200',
    category: '冒险',
    rating: 4.1,
    releaseDate: '2023-06-18'
  },
  {
    id: 7,
    title: '拳击训练营',
    description: '专业拳击训练，提升你的格斗技巧',
    cover: 'https://via.placeholder.com/300x200',
    category: '格斗',
    rating: 4.6,
    releaseDate: '2023-05-22'
  },
  {
    id: 8,
    title: '篮球明星',
    description: '体验NBA球星的生活，成为篮球传奇',
    cover: 'https://via.placeholder.com/300x200',
    category: '运动',
    rating: 4.4,
    releaseDate: '2023-04-10'
  }
])

// 根据筛选条件过滤游戏
const filteredGames = computed(() => {
  let result = [...games.value]
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(game => 
      game.title.toLowerCase().includes(query) || 
      game.description.toLowerCase().includes(query)
    )
  }
  
  // 类型过滤
  if (categoryFilter.value) {
    result = result.filter(game => game.category === categoryFilter.value)
  }
  
  // 排序
  if (sortBy.value === 'newest') {
    result.sort((a, b) => new Date(b.releaseDate) - new Date(a.releaseDate))
  } else if (sortBy.value === 'popular') {
    // 这里假设人气是随机的，实际应用中应该有一个popularity字段
    result.sort(() => Math.random() - 0.5)
  } else if (sortBy.value === 'rating') {
    result.sort((a, b) => b.rating - a.rating)
  }
  
  return result
})

const handlePageChange = (page) => {
  currentPage.value = page
  // 在实际应用中，这里应该调用API获取对应页的数据
}

const goToGame = (id) => {
  router.push(`/game/${id}`)
}
</script>

<style scoped>
.games-page {
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 32px;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  color: #606266;
  font-size: 16px;
}

.filter-section {
  margin-bottom: 20px;
}

.game-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
  margin-bottom: 20px;
}

.game-card:hover {
  transform: translateY(-5px);
}

.game-cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.game-info {
  padding: 15px 0;
}

.game-info h3 {
  margin-bottom: 10px;
}

.game-meta {
  margin-top: 10px;
}

.pagination-container {
  margin-top: 30px;
}
</style>